// 第一张轮播图
const lunbo = [
    { url: './img/content/banner-01.jpg' },
    { url: './img/content/banner-02.jpg' },
    { url: './img/content/banner-03.jpg' }
]
const img1 = document.querySelector('.first-banner-box img');
const box = document.querySelector('.first-banner-box')
const su = document.querySelector('.banner-dot .su')
const zi = document.querySelector('.banner-dot .zi')
const yun = document.querySelector('.banner-dot .yun')
let i = 0;
function automatic() {
    i++;
    if (i > 2) {
        i = 0;
    }
    img1.src = lunbo[i].url;
    document.querySelector('.banner-dot .active-one').classList.remove('active-one');
    document.querySelector(`.banner-dot :nth-child(${i + 1})`).classList.add('active-one')

}
let timeId = setInterval(automatic, 3000);
// 鼠标进入删除定时器
box.addEventListener('mouseenter', function () {
    clearInterval(timeId);
})
// 鼠标离开开启定时器
box.addEventListener('mouseleave', function () {
    clearInterval(timeId);
    timeId = setInterval(automatic, 3000);
})

su.addEventListener('click', function () {
    img1.src = lunbo[0].url;
    document.querySelector(`.banner-dot :nth-child(${i + 1})`).classList.remove('active-one')
    zi.classList.remove('active-one');
    yun.classList.remove('active-one');
    su.classList.add('active-one')

})

zi.addEventListener('click', function () {
    img1.src = lunbo[1].url;
    document.querySelector(`.banner-dot :nth-child(${i + 1})`).classList.remove('active-one')
    su.classList.remove('active-one')
    yun.classList.remove('active-one');
    zi.classList.add('active-one')

})

yun.addEventListener('click', function () {
    img1.src = lunbo[2].url;
    document.querySelector(`.banner-dot :nth-child(${i + 1})`).classList.remove('active-one')
    su.classList.remove('active-one')
    zi.classList.remove('active-one')
    yun.classList.add('active-one')

})









//第二张轮播图

const lunbo2 = [
    { url: './img/content/banner-04.jpg' },
    { url: './img/content/banner-05.jpg' },
    { url: './img/content/banner-06.jpg' },
    { url: './img/content/banner-07.jpg' },
    { url: './img/content/banner-08.jpg' },
]

const img2 = document.querySelector('.second-banner-box img');
const box2 = document.querySelector('.second-banner-box')
const a = document.querySelector('.second-banner-dot .a');
const b = document.querySelector('.second-banner-dot .b');
const c = document.querySelector('.second-banner-dot .c');
const d = document.querySelector('.second-banner-dot .d');
const e = document.querySelector('.second-banner-dot .e');
let j = 0;
function automatic2() {
    j++;
    if (j > 4) {
        j = 0;
    }
    img2.src = lunbo2[j].url;
    document.querySelector('.second-banner-dot .active-one').classList.remove('active-one');
    document.querySelector(`.second-banner-dot :nth-child(${j + 1})`).classList.add('active-one');

}

let Id = setInterval(automatic2, 3000);

// 鼠标进入删除定时器
box2.addEventListener('mouseenter', function () {
    clearInterval(Id);
})

// 鼠标离开开启定时器
box2.addEventListener('mouseleave', function () {
    clearInterval(Id);
    Id = setInterval(automatic2, 3000);
});


a.addEventListener('click', function () {
    img2.src = lunbo2[0].url;
    document.querySelector(`.second-banner-dot :nth-child(${i + 1})`).classList.remove('active-one')
    b.classList.remove('active-one');
    c.classList.remove('active-one');
    d.classList.remove('active-one');
    e.classList.remove('active-one');
    a.classList.add('active-one')

})

b.addEventListener('click', function () {
    img2.src = lunbo2[1].url;
    document.querySelector(`.second-banner-dot :nth-child(${i + 1})`).classList.remove('active-one')
    a.classList.remove('active-one');
    c.classList.remove('active-one');
    d.classList.remove('active-one');
    e.classList.remove('active-one');
    b.classList.add('active-one')

})
c.addEventListener('click', function () {
    img2.src = lunbo2[2].url;
    document.querySelector(`.second-banner-dot :nth-child(${i + 1})`).classList.remove('active-one')
    b.classList.remove('active-one');
    a.classList.remove('active-one');
    d.classList.remove('active-one');
    e.classList.remove('active-one');
    c.classList.add('active-one')

})
d.addEventListener('click', function () {
    img2.src = lunbo2[3].url;
    document.querySelector(`.second-banner-dot :nth-child(${i + 1})`).classList.remove('active-one')
    b.classList.remove('active-one');
    c.classList.remove('active-one');
    a.classList.remove('active-one');
    e.classList.remove('active-one');
    d.classList.add('active-one')

})
e.addEventListener('click', function () {
    img2.src = lunbo2[4].url;
    document.querySelector(`.second-banner-dot :nth-child(${i + 1})`).classList.remove('active-one')
    b.classList.remove('active-one');
    c.classList.remove('active-one');
    d.classList.remove('active-one');
    a.classList.remove('active-one');
    e.classList.add('active-one')

})